<template>
  <div id="page">
    <!-- 顶部 -->
    <div id="header_top">
      <p class="iconfont">&#xe6bc;</p>
      <p class="text1">确认订单</p>
      <p>
        <span class="iconfont">&#xf0112; </span>
        <span class="iconfont">&#xe71e;</span>
        <i></i>
      </p>

      <div id="address">
        <!-- 无地址 -->
        <div v-if="istrue">
          <van-button type="warning" @click="$router.push('/path')"
            >+点击完善收货地址</van-button
          >
        </div>
        <!-- 有地址地址 -->
        <div v-else>
          <div @click="$router.push('/path')">
            <p>{{pathlist1.username}} {{pathlist1.userphone}}</p>
            <p>
              {{pathlist1.location+pathlist1.useraddress}}
            </p>
          </div>
        </div>
      </div>
    </div>

    <!-- 发票 -->
    <div id="invoice">
      <div class="title clearfix">
        <div class="left">
          <img src="../../assets/images/dot_03.jpg" alt="" />
          <span>品牌精选</span>
        </div>
        <div class="right">
          <span>已免运费</span>
          <i></i>
          <span>领劵</span>
        </div>
      </div>
      <ul>
        <li v-for="item in arr" :key='item.id'>
          <img :src="$pre+item.img" alt="" />
          <div>
            <p>{{item.goodsname}}</p>
            <p>
              <span>￥</span>
              <span>{{item.price}}</span>
              <i>x{{item.num}}</i>
            </p>
            <p>
              <span>7天无理由退货</span>
              <span>特价</span>
            </p>
          </div>
        </li>
      </ul>
      <p class="con1">
        <span>发票类型</span>

        <span class="iconfont">&#xe601;</span>
        <span>不开发票</span>
      </p>
      <p class="con2">
        <span>售后免邮</span>
        <span>部分商家赠送</span>
      </p>
      <p class="con3">
        <span>买家留言</span>
        <span>填写内容需要与商家协议并确认，45字以内</span>
      </p>
    </div>

    <!-- 价格 -->
    <div id="price">
      <p>
        <span>商品金额</span>
        <span>￥{{list.countmoney}}</span>
      </p>
      <p>
        <span>优惠活动</span>
        <span>-￥{{100*list.countnumber}}</span>
      </p>
      <p>
        <span>优惠券</span>
        <span class="iconfont">&#xe601;</span>
        <span>暂无可用</span>
      </p>
    </div>

    <!-- 尾部 -->
    <footer>
      <div class="top">
        <p>
          <span>合计</span>
          <span>已免运费</span>
        </p>
        <p>
          <span>￥{{list.countmoney}}</span>
          <span>已优惠{{100*list.countnumber}}元</span>
        </p>
        <p @click="add()">确认订单</p>
      </div>
      <!-- <div class="bottom">
                <p></p>
            </div> -->
    </footer>
  </div>
</template>

<script>
import { addresslist,orderadd} from "../../utils/api";
// import { addresslist} from "../../utils/api";
import { mapGetters, mapActions } from "vuex";
export default {
  data() {
    return {
      istrue: true,
      list: {},
      arr:[],
      pathlist1:{}
    };
  },

  mounted() {
    let shoplist = JSON.parse(sessionStorage.getItem("order"));
    shoplist.uid = this.userlist.uid
    shoplist.addressid = this.$route.query.addressid
      ? Number(this.$route.query.addressid)
      : "";
    this.list = shoplist;

    // 获取购物车列表
    this.arr=JSON.parse(sessionStorage.getItem('shop'))
    console.log(this.arr);
    console.log(this.list);

    // 地址显示隐藏
    if (this.$route.query.addressid) {
      this.istrue = false;
      addresslist({ uid: this.userlist.uid,id:this.$route.query.addressid }).then((res) => {
        console.log(res)
        this.pathlist1=res.data.list[0]
      });
    } else {
      this.istrue = true;
    }
  },
  methods: {
    ...mapActions({
      reqchangelist: "path/reqchangelist",
    }),
    // 点击确认订单
    add() {
      console.log(this.list);
      //  订单生成
       orderadd(this.list).then((res) => {
        console.log(res);
        if(res.data.code==200){
          this.$router.push('/pay')
        }
      }); 
    },
  },
  computed: {
    ...mapGetters({
      userlist: "user",
      pathlist: "path/list",
    }),
  },
};
</script>

<style scoped src='../../assets/css/order.css'>
</style>